@blue: #007bff;
@indigo: #6610f2;
@purple: #6f42c1;
@pink: #e83e8c;
@red: #dc3545;
@orange: #fd7e14;
@yellow: #ffc107;
@green: #28a745;
@teal: #20c997;
@cyan: #17a2b8;
@white: #fff;
@gray: #868e96;
@gray-dark: #343a40;
@primary: #007bff;
@secondary: #868e96;
@success: #28a745;
@info: #17a2b8;
@warning: #ffc107;
@danger: #dc3545;
@light: #f8f9fa;
@dark: #343a40;

.width-100 {
    width: 100%;
}
.height-100 {
    height: 100%;
}

.fixed{
    position: fixed;
}
.relative{
    position: relative;
}
.absolute{
    position: absolute;
}

.flex-row{
    display: flex;
    flex-direction: row;
}
.flex-colunm{
    display: flex;
    flex-direction: column;
}
.justify-center{
    justify-content: center;
}
.justify-between{
    justify-content: space-between;
}
.justify-around{
    justify-content: space-around;
}
.align-center{
    align-items: center;
}

header{
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    // background: linear-gradient(to top right, #563D7C, #17A2B8, #41B883);
    // background: -moz-linear-gradient(to top right, #563D7C, #17A2B8, #41B883);
    // background: -webkit-linear-gradient(to top right, #563D7C, #17A2B8, #41B883);
    // background: linear-gradient(left bottom, #563D7C, #17A2B8, #41B883);
    // background: -moz-linear-gradient(left bottom, #563D7C, #17A2B8, #41B883);
    // background: -webkit-linear-gradient(left bottom, #563D7C, #17A2B8, #41B883);
    // animation: ani-hue 60s infinite linear;
    // -webkit-animation: ani-hue 60s infinite linear;
}
main {
    width: 100%;
    overflow: auto;
    top: 5.5rem;
    bottom: 2.5rem;
}
footer{
    width: 100%;
    bottom: 0.1rem;
    height: 2.3rem;
    .footer-main{
        height: 100%;
    }
}
.keyframes(all,ani-hue) {
    from { filter: hue-rotate(0);}
    to { filter: hue-rotate(-360deg);}
}
